<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>SlideShowTest</title>
<meta http-equiv="Content-Type"        content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript"          />
<meta http-equiv="Content-Style-Type"  content="text/css"                 />
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<!--
//-->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript">
<!--
var slidwshow;
function build(mode) {
  $('slide').innerHTML = '';
  slideshow = SlideShow.create({
    pictureWidth:  100,  
    pictureHeight: 130,  
    capacity:      5,
    mode:          mode
  });
  slideshow.setFocusedIndex(2);
  slideshow.add('img/cats/1.jpg', { data1: 'cat1' });
  slideshow.add('img/cats/2.jpg', { data1: 'cat2' });
  slideshow.add('img/cats/3.jpg', { data1: 'cat3' });
  slideshow.add('img/cats/4.jpg', { data1: 'cat4' });
  slideshow.add('img/cats/5.jpg', { data1: 'cat5' });

  slideshow.loadPlugin('SpotLight');

  slideshow.registerCallback('afterChange', function(pictures, index){
    var selected = pictures[index];
    var options  = selected.options;
    $('message').innerHTML = options.data1;
  });
  slideshow.setup('slide', 1);
}


Event.observe(window, 'load', function() {
  build('horizontal');
});

-->
</script>
</head>
<body>
<h1>SlideShow</h1>
<div id="slide"></div>
<br />
<input type="button" onclick="slideshow.slideToPrev()" value="prev">
<input type="button" onclick="slideshow.slideToNext()" value="next">
<div id="message">message</div>
<br />
<input type="button" onclick="build('horizontal')" value="horizontal">
<input type="button" onclick="build('vertical')" value="vertical">
<input type="button" onclick="slideshow.startWheelObserving()" value="bindWheelScrolling">
</body>
</html>
